<template>
	<view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="account" title="修改个人信息" @click="gotoModifyUser"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="info-circle" title="修改密码" @click="gotoModifyPassword"></u-cell-item>
				<u-cell-item icon="kefu-ermai" title="客服中心" @click="phone"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="man-delete" title="注销"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 清除个人信息记录并跳转到首页 -->
		<view class="exit">
			<u-button class="btn" shape="circle" @click="logout">退出登录</u-button>
		</view>
		<!-- Toast消息提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// import {
	// 	removeUser,
	// 	getUser,
	// 	setUser
	// } from '../../common/js/user.js'
	export default {
		data() {
			return {
				pic: 'https://uviewui.com/common/logo.png',
				show: true
			}
		},
		onLoad() {

		},
		methods: {
			// 退出登录
			logout() {

				const token = this.vuex_token
				this.$u.api.logout({
					token: token
				}).then(res => {
					console.log(res)
					if (res.meta.status == 200) {
						// 清楚本地存储
						uni.removeStorageSync('token')
						uni.removeStorageSync('username')
						uni.removeStorageSync('iphone')
						this.$u.vuex('vuex_token', '')
						// 提示并跳转到首页
						this.$refs.uToast.show({
							position: 'bottom',
							title: '退出成功',
							type: 'success',
							url: 'pages/index/index',
							isTab: true
						})
					}
				}).catch(error => {
					uni.removeStorageSync('token')
					return Promise.reject(error)
				})
			},
			gotoModifyUser() {
				this.$u.route('/pages/setting/userInfo')
			},
			gotoModifyPassword() {
				this.$u.route('/pages/public/modifyPassword')
			},
			phone() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.exit {
		margin-top: 60rpx;
		width: 100%;
		height: 300rpx;

		.btn {
			width: 90%;
			height: 100rpx;
			color: #FFFFFF;
			background-color: #007AFF;
		}
	}
</style>
